<template>

  <j-editable-table
    ref="editableTable"
    :loading="loading"
    :columns="columns"
    :dataSource="dataSource"
    :rowNumber="true"
    :rowSelection="true"
    :actionButton="true"
    :maxHeight="700"
    :disabledRows="{ dbFieldName:'id'}"
    @added="handleAdded"
    @deleted="handleDeleted"
    @valueChange="handleValueChange"/>

</template>

<script>

import JEditableTable from '@/components/jeecg/JEditableTable'
import {FormTypes} from '@/utils/JEditableTableUtil'

let primaryKey = '_pk'
export default {
  name: 'DBAttributeTable',
  components: {
    JEditableTable
  },
  data() {
    return {
      primaryKey: primaryKey,
      deleteIds: [],
      loading: false,
      selectedRowKeys: [],
      dataSource: [],
      columns: [
        {
          title: '字段名称', // 必填
          key: 'dbFieldName',
          //width: '15%',
          width: '160px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '请输入${title}',
          validateRules: [
            {required: true, message: '${title}不能为空'},
            {
              pattern: /^[a-zA-Z]{1}(?!_)[a-zA-Z0-9_\\$]+$/,
              message: '命名规则:只能由字母、数字、下划线、$符号组成;必须以字母开头;不能以单个字母加下滑线开头'
            }],
          props: {}
        },
        {
          title: '字段备注', // 必填
          key: 'dbFieldTxt',
          // width: '13%',
          width: '140px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '请输入${title}',
          validateRules: [{required: true, message: '${title}不能为空'}]
        },
        {
          title: '字段长度', // 必填
          key: 'dbLength',
          // width: '9%',
          width: '100px',
          type: FormTypes.inputNumber,
          defaultValue: 32,
          placeholder: '请输入${title}',
          validateRules: [{required: true, message: '${title}不能为空'}]
        },
        {
          title: '小数点', // 必填
          key: 'dbPointLength',
          // width: '9%',
          width: '100px',
          type: FormTypes.inputNumber,
          defaultValue: 0,
          placeholder: '请输入${title}',
          validateRules: [{required: true, message: '${title}不能为空'}]
        },
        {
          title: '默认值',
          key: 'dbDefaultVal',
          // width: '12%',
          width: '130px',
          type: FormTypes.input,
          defaultValue: ''
        },
        {
          title: '字段类型', // 下拉框，默认String
          key: 'dbType',
          // width: '13%',
          width: '140px',
          type: FormTypes.select,
          options: [ // 下拉选项
            {title: 'String', value: 'string'},
            {title: 'Integer', value: 'int'},
            {title: 'Double', value: 'double'},
            {title: 'Date', value: 'Date'},
            {title: 'BigDecimal', value: 'BigDecimal'},
            {title: 'Text', value: 'Text'},
            {title: 'Blob', value: 'Blob'}
          ],
          defaultValue: 'String',
          placeholder: '请选择${title}',
          validateRules: [{required: true, message: '请选择${title}'}]
        },
        {
          title: '主键',
          key: 'dbIsKey',
          // width: '7%',
          width: '80px',
          type: FormTypes.checkbox,
          customValue: ['1', '0'],
          defaultChecked: false
        },
        {
          title: '允许空值',
          key: 'dbIsNull',
          // width: '7%',
          width: '80px',
          type: FormTypes.checkbox,
          customValue: ['1', '0'],
          defaultChecked: true
        },
        {
          title: '排序', // 必填
          key: 'orderNum',
          isOrder: true, //  是否是排序字段，如果是排序字段，那么新增的默认值永远是最大值+1
          // width: '7%',
          width: '80px',
          type: FormTypes.inputNumber,
          defaultValue: 0
        }
      ],
      addBatching: false
    }
  },
  created() {
    this.jet = null
  },
  mounted() {
    this.jet = this.$refs.editableTable
  },
  methods: {

    /* 初始化列表 */
    initialTable() {
      this.dataSource = []
      this.deleteIds = []
      this.selectedRowKeys = []
      this.$refs.editableTable.initialize()
    },

    handleAdded() {
      this.$emit('added', this)
    },
    handleDeleted() {
      this.$emit('deleted', this)
    },
    handleValueChange(event) {
      let {type, row, column, value} = event
      if (type === FormTypes.select && column.key === 'dbType' && value === 'Date') {
        // 当字段类型改为Date时触发同步事件，同步控件类型为日期选择器
        this.$emit('syncDbType', {row, value, target: this})
      }
    },

    /** 新增一行，并反馈给父组件 */
    tableAddLine(newLine) {
      this.$refs.editableTable.push(newLine)
      // 正在批量添加数据，不单独反馈
      if (!this.addBatching) {
        this.$emit('added', this)
      }
    },
    /** 开始批量添加数据，在此期间添加的数据不会反馈给父组件进行同步 */
    addBatchBegin() {
      this.addBatching = true
      this.loading = true
    },
    /** 结束批量添加数据，会立即反馈给父组件进行同步数据 */
    addBatchEnd() {
      this.addBatching = false
      this.loading = false
      this.$emit('added', this)
    }

  }
}
</script>

<style scoped>

</style>